<template>
	<div>
		<swiper :lunbotuList='lunbotuList'></swiper>
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/newslist">
					<img src="../../lib/images/menu1.png">
					<div class="mui-media-body">新闻</div>
				</router-link>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/photolist">
					<img src="../../lib/images/menu2.png">
					<div class="mui-media-body">图片</div>
				</router-link>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/goodslist">
					<img src="../../lib/images/menu3.png">
					<div class="mui-media-body">商品</div>
				</router-link>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<a href="#">
					<img src="../../lib/images/menu4.png">
					<div class="mui-media-body">留言</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<a href="#">
					<img src="../../lib/images/menu5.png">
					<div class="mui-media-body">视频</div>
				</a>
			</li>
		</ul>
		<div class="recomme-container">
			<div class="top">
				<span class="title">推荐歌曲</span>
				<span class="mui-icon mui-icon-arrowright"></span>
			</div>
			<div class="bottom">
				<div class="recomme-item" v-for="(item,index) in recommeList" :key="index">
					<img :src="item.img" />
					<p class="title">{{ item.title }}</p>
					<p class="text">{{ item.text }}</p>
				</div>
			</div>
		</div>
		<div class="recomme-container list-container">
			<div class="top">
				<span class="title">一周榜单</span>
				<span class="mui-icon mui-icon-arrowright"></span>
			</div>
			<div class="item" v-for="(item,index) in data" :key="index">
				<img :src="item.img" />
				<p class="index">{{ index+1 }}</p>
				<div class="right">
					<p class="title">{{ item.title }}</p>
					<p class="text">{{ item.text }}</p>
				</div>
			</div>
		</div>
		<div style="font-size: 13px;text-align: center;line-height: 40px;" @click="more()" v-show="flag">加载更多</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'
	import swiper from '../subcomponents/swiper.vue'
	export default {
		data() {
			return {
				lunbotuList: [],
				recommeList: [],
				list:[],
				data:[],
				flag:true
			};
		},
		created() {
			this.getLunbotu();
		},
		methods: {
			getLunbotu() {
				this.$http.get('data.php').then(result => {
					if(result.body.status == true) {
						this.lunbotuList = result.body.banner_imgs;
						this.recommeList = result.body.recomme;
						this.list = result.body.list;
						if(this.list.length <= 5){
							this.data = this.list;
						}else{
							this.data = this.list.slice(0,5)
						}
					} else {
						Toast('加载轮播图失败...');
					}
				})
			},
			more(){
				this.data = this.list;
				this.flag = false;
			}
		},
		components:{
			swiper
		}
	}
</script>

<style lang="scss" scoped>
	.mint-swipe {
		height: 180px;
		.mint-swipe-item {
			&:nth-child(1) {
				background: red;
			}
			&:nth-child(2) {
				background: blue;
			}
			&:nth-child(3) {
				background: cyan;
			}
			img {
				width: 100%;
				height: 120%;
			}
		}
	}
	.mui-grid-view.mui-grid-9{
		background: #fff;
		width: 96%;
		margin: -10px auto;
		box-shadow: 0 0 2px #ccc;
		img{
			height: 38px;
			width: 38px;
		}
	}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell{
		border: none;
		padding: 0 15px;
		.mui-media-body{
			font-size: 12px;
		}
	}
	.mui-col-xs-4{
		width: 19.33%;
	}
	.recomme-container{
		background: #fff;
		margin-top: 20px;
		box-shadow: 0 0 2px #ccc;
		.top{
			height: 35px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				font-size: 13px;
				font-weight: bold;
				padding-left: 10px;
			}
			.mui-icon-arrowright{
				padding-right: 10px;
				font-size: 16px;
			}
		}
		.bottom{
			display:flex;
			justify-content: space-around;
			.recomme-item{
				width: 30%;
				img{
					width: 100%;
					
				}
				.title{
					color: #000;
					font-size: 13px;
					margin-bottom: 0;
				}
				.text{
					font-size: 13px;
				}
			}
		}
		.item{
			border-top: 1px solid #ccc;
			height: 70px;
			display: flex;
			align-items: center;
			width: 95%;
			margin: 0 auto;
			img{
				width: 55px;
				height: 55px;
				margin-left: 10px;
			}
			.index{
				margin-left: 30px;
				font-size: 15px;
				font-weight: bold;
				color: #000;
			}
			.right{
				margin-left: 20px;
				.title{
					margin: 0;
					color: #000;
				}
				.text{
					margin: 0;
				}
			}
		}
	}
</style>